<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东移动版</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入swiper.css样式文件 -->
    <link rel="stylesheet" href="./lib/css/swiper.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <span class="logo">
            <a href="javascript:;"></a>
        </span>
        <span class="search">
            <input type="text" placeholder="搜索框">
        </span>
        <span class="login">
            <a href="javascript:;">登录</a>
        </span>
    </header>
    <!-- 轮播图 -->
    <section class="silder swiper-container">
        <ul class="silder_ul swiper-wrapper">
            <!-- <li class="swiper-slide">
                <a href="javascript:;">
                    <img src="./uploads/l8.jpg" alt="">
                </a>
            </li> -->
            <li class="swiper-slide">
                <a href="javascript:;">
                    <img src="./uploads/l1.jpg" alt="">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;">
                    <img src="./uploads/l2.jpg" alt="">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;">
                    <img src="./uploads/l3.jpg" alt="">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;">
                    <img src="./uploads/l4.jpg" alt="">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;">
                    <img src="./uploads/l5.jpg" alt="">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;">
                    <img src="./uploads/l6.jpg" alt="">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;">
                    <img src="./uploads/l7.jpg" alt="">
                </a>
            </li>
            <li class="swiper-slide">
                <a href="javascript:;">
                    <img src="./uploads/l8.jpg" alt="">
                </a>
            </li>
            <!-- <li class="swiper-slide">
                <a href="javascript:;">
                    <img src="./uploads/l1.jpg" alt="">
                </a>
            </li> -->
        </ul>
        <!-- 索引器 -->
        <div class="swiper-pagination"></div>
    </section>
    <!-- 商品分类导航 -->
    <nav>
        <ul>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_1.png" alt="">
                    <p>京东超市</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_2.png" alt="">
                    <p>全球购</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_3.png" alt="">
                    <p>充值中心</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_4.png" alt="">
                    <p>服装城</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_5.png" alt="">
                    <p>理财</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_6.png" alt="">
                    <p>领券</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_7.png" alt="">
                    <p>物流查询</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_8.png" alt="">
                    <p>我的关注</p>
                </a>
            </li>
        </ul>
    </nav>
    <div class="line"></div>
    <!-- 掌上秒杀 -->
    <div class="second_kill">
        <div class="second_kill_title">
            <span class="clock"></span>
            <span class="second_kill_text">掌上秒杀</span>
            <div class="second_kill_time">
                <span></span>
                <span></span>
                <span>:</span>
                <span></span>
                <span></span>
                <span>:</span>
                <span></span>
                <span></span>
            </div>
            <span class="second_kill_more">
                <a href="javascript:;">更多秒杀 &gt;</a>
            </span>
        </div>
        <div class="second_kill_prod">
            <ul>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/seckill_1.jpg" alt="">
                        <span>热卖</span>
                        <p>&yen; 79</p>
                        <del>&yen; 139</del>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/seckill_2.jpg" alt="">
                        <span>热卖</span>
                        <p>&yen; 79</p>
                        <del>&yen; 139</del>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/seckill_3.jpg" alt="">
                        <span>热卖</span>
                        <p>&yen; 79</p>
                        <del>&yen; 139</del>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 主题日 -->
    <div class="theme_day">
        <div class="theme_day_title">
            <img src="./uploads/banner_bg.jpg" alt="">
            <ul class="clearfix">
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/banner_1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/banner_2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/banner_3.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="theme_day_prod">
            <ul class="clearfix">
                <li>
                    <a href="">
                        <img src="./uploads/major_1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./uploads/major_2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./uploads/major_3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./uploads/major_4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./uploads/major_5.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./uploads/major_6.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./uploads/major_7.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 广告1 -->
    <div class="banner">
        <a href="javascript:;">
            <img src="./uploads/advert_1.jpg" alt="">
        </a>
    </div>
    <!-- 特色超市 -->
    <div class="feature_market">
        <div class="feature_market_title">
            <span class="title_text">特色超市</span>
        </div>
        <div class="feature_market_prod">
            <ul class="clearfix">
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/market_1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/market_2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/market_3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/market_4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/market_5.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 广告2 -->
    <div class="banner">
        <a href="javascript:;">
            <img src="./uploads/advert_2.jpg" alt="">
        </a>
    </div>
    <!-- 主题街 -->
    <div class="theme_street">
        <div class="theme_street_title">
            <span>主题街</span>
        </div>
        <div class="theme_street_prod ">
            <ul class="clearfix">
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_5.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_6.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_7.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_8.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_9.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_10.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_11.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/theme_12.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 广告3 -->
    <div class="banner">
        <a href="javascript:;">
            <img src="./uploads/advert_3.jpg" alt="">
        </a>
    </div>
    <!-- 品牌推荐 -->
    <div class="brand_recom">
        <div class="brand_recom_title">
            <span>品牌推荐</span>
        </div>
        <ul class="clearfix">
            <li>
                <a href="javascript:;">
                    <img src="./uploads/brand_1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/brand_2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/brand_3.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>
    <!-- 广告4 -->
    <div class="banner">
        <a href="javascript:;">
            <img src="./uploads/advert_4.jpg" alt="">
        </a>
    </div>
    <!-- 猜你喜欢 -->
    <div class="youlike">
        <div class="youlike_title clearfix">
            <span>品牌推荐</span>
            <a href="javascript:;">
                <img src="./images/icon-login.png" alt=""> 登录后更懂你 &gt;
            </a>
        </div>
        <div class="youlike_prod">
            <ul class="clearfix">
                <li>
                    <div>
                        <span>&yen; 25</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                    <a href="javascript:;">
                        <img src="./uploads/item_1.jpg" alt="">
                        <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>
                    </a>
                </li>
                <li>
                    <div>
                        <span>&yen; 25</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                    <a href="javascript:;">
                        <img src="./uploads/item_2.jpg" alt="">
                        <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>
                    </a>
                </li>
                <li>
                    <div>
                        <span>&yen; 25</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                    <a href="javascript:;">
                        <img src="./uploads/item_3.jpg" alt="">
                        <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>
                    </a>
                </li>
                <li>
                    <div>
                        <span>&yen; 25</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                    <a href="javascript:;">
                        <img src="./uploads/item_4.jpg" alt="">
                        <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>
                    </a>
                </li>
                <li>
                    <div>
                        <span>&yen; 25</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                    <a href="javascript:;">
                        <img src="./uploads/item_5.jpg" alt="">
                        <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>
                    </a>
                </li>
                <li>
                    <div>
                        <span>&yen; 25</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                    <a href="javascript:;">
                        <img src="./uploads/item_6.jpg" alt="">
                        <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>
                    </a>
                </li>
                <li>
                    <div>
                        <span>&yen; 25</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                    <a href="javascript:;">
                        <img src="./uploads/item_7.jpg" alt="">
                        <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>
                    </a>
                </li>
                <li>
                    <div>
                        <span>&yen; 25</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                    <a href="javascript:;">
                        <img src="./uploads/item_8.jpg" alt="">
                        <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>
                    </a>
                </li>
                <li>
                    <div>
                        <span>&yen; 25</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                    <a href="javascript:;">
                        <img src="./uploads/item_9.jpg" alt="">
                        <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>
                    </a>
                </li>
                <li>
                    <div>
                        <span>&yen; 25</span>
                        <a href="javascript:;">看相似</a>
                    </div>
                    <a href="javascript:;">
                        <img src="./uploads/item_10.jpg" alt="">
                        <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 点击更多 -->
    <div class="about_more">
        <div class="click_more">点击加载更多</div>
        <div class="nav_more">
            <a href="javascript:;">登录</a>
            <a href="javascript:;">注册</a>
            <a href="javascript:;">反馈</a>
            <a href="javascript:;">回到顶部</a>
        </div>
        <div class="other_versions">
            <a href="javascript:;">
                <span></span>
                <p>客户端</p>
            </a>
            <a href="javascript:;">
                <span></span>
                <p>触屏版</p>
            </a>
            <a href="javascript:;">
                <span></span>
                <p>电脑版</p>
            </a>
        </div>
        <div class="copyright">
            Copyright © 2004-2016 京东JD.com 版权所有
        </div>
    </div>
    <!-- 底部 -->
    <footer>
        <div class="footer_nav">
            <a href="javascript:;">
                <img src="./images/index-icon.png" alt="">
            </a>
            <a href="javascript:;">
                <img src="./images/sort-icon.png" alt="">
            </a>
            <a href="javascript:;">
                <img src="./images/618-icon.png" alt="">
            </a>
            <a href="javascript:;">
                <img src="./images/cart-icon.png" alt="">
            </a>
            <a href="javascript:;">
                <img src="./images/center-icon.png" alt="">
            </a>
        </div>
    </footer>
</body>

</html>
<!-- <script src="./js/tapAndSwipe.js"></script>
<script src="./js/index.js"></script> -->

<!-- 引入swiper.js文件 -->
<script src="./lib/js/swiper.js"></script>
<!-- 写swiper逻辑及参数配置 -->
<script>
    var mySwiper = new Swiper('.swiper-container', {
        // 设置循环轮播
        loop: true,
        // 水平滑动
        mode: 'horizontal',
        // 设置自动滑动
        autoplay: {
            delay: 1000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
            reverseDirection: false,
        },
        // 开启分页器
        pagination: {
            el: '.swiper-pagination',
        }
    });

    // 调用方法,设置头部背景透明度,在轮播图内随屏幕的滚动变化数值
    changeHeader();
    // 调用放大,设置掌上秒杀倒计时
    timeOut();

    // 封装一个函数改变头部背景透明度的方法
    function changeHeader() {
        // 获取事件源
        var header = document.querySelector('header');
        // 获取轮播图区域的高度
        var sliderHeight = document.querySelector(".silder img").offsetHeight;
        // 绑定屏幕滚动事件
        window.onscroll = function () {
            //获取浏览器滚动的距离 , 需要设置兼容性
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || this.document.body.scrollTop;
            // 通过向上滚动的距离比上轮播图区域的高度的比值,设置头部的背景透明度的值
            var tmpOpa = scrollTop / sliderHeight;
            // 判断比值, 头部透明度不超过0.9
            if (tmpOpa > 0.9) {
                tmpOpa = 0.9;
            }
            // 修改头部背颜色样式
            header.style.backgroundColor = "rgba(201, 21, 35, " + tmpOpa + ")";
        }
    };

    // 封装设置掌上秒杀倒计时的函数
    function timeOut() {
        // 获取事件源
        var spans = document.querySelectorAll(".second_kill_time>span");
        // 设置初始倒计时事件
        var times = 2 * 60 * 60;  //设置倒计2小时,转换为秒数
        // 根据初始时间调用渲染页面时间的方法
        timeRender();

        // 开启计时器,每过一秒钟,减少1秒实现倒计时
        var timerId = setInterval(function () {
            // 每过1秒.总时间减少1秒钟
            times--;
            // 根据递减1秒后重新渲染页面时间
            timeRender();

            // 判断倒计时结束,清除定时器
            if (times === 0) {
                clearInterval(timerId);
                console.log('倒计时结束!')
            }
        }, 1000);

        // 封装渲染页面时间的函数
        function timeRender() {
            // 把最新的时间转为小时, 分, 秒的形式
            var hours = parseInt(times / 60 / 60); // 取整数部分
            var minutes = parseInt(times / 60 - hours * 60); // 分钟部分=总分钟数-小时分钟数
            var seconds = times - minutes * 60 - hours * 60 * 60; // 秒数部分=总秒数-分钟部分的秒数-小时部分的秒数

            // 把小时、分钟、秒数转为两位数
            var hoursTen = parseInt(hours / 10); // 十位数为小时数10的倍数,取整
            var hoursUnit = hours % 10; // 个位数小时数求余
            var minutesTen = parseInt(minutes / 10);
            var minutesUnit = minutes % 10;
            var secondsTen = parseInt(seconds / 10);
            var secondsUnit = seconds % 10;

            // 把获取到的十位数和个位数的小时数,分钟数,秒钟数渲染到页面
            spans[0].innerHTML = hoursTen;
            spans[1].innerHTML = hoursUnit;
            spans[3].innerHTML = minutesTen;
            spans[4].innerHTML = minutesUnit;
            spans[6].innerHTML = secondsTen;
            spans[7].innerHTML = secondsUnit;
        }
    };
</script>